﻿<!DOCTYPE>  
<html>  
<meta charset="utf-8">  
<head>  
<title>无缝滚动</title>  
<style>  
* {margin:0; padding:0;}  
#div1 {width:800px; height:200px; margin:100px auto; position: relative; overflow: hidden;}  
img {width:200px; height:200px;}  
#div1 ul {position: absolute; left:0; top:0;}  
#div1 ul li {float:left; list-style:none; width:200px; height:200px; }  
a:nth-child(1){color:pink;text-decoration:none;position:absolute;left:269px;top:53px;display:block}
a:nth-child(2){color:pink;text-decoration:none;position:absolute;left:940px;top:53px;}
</style>  
<script>  
window.onload=function()  
{  
    var oDiv=document.getElementById('div1');  
    var oUl=oDiv.getElementsByTagName('ul')[0];  
    var aLi=oUl.getElementsByTagName('li');  
  
    var speed=-2;  //默认为向右移动
    oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;  
    oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';  
    console.log(oUl.offsetLeft)
    function move()  
    {  	
        if(oUl.offsetLeft<-oUl.offsetWidth/2)  
        {  
            oUl.style.left='0';  
        }  
        if(oUl.offsetLeft>0)  //向右
        {  
            oUl.style.left=-oUl.offsetWidth/2+'px';  
        }  
        oUl.style.left=oUl.offsetLeft+speed+'px';  
    }  
  
	var timer=setInterval(move,30)  
  
    oDiv.onmouseover=function()  
    {  
        clearInterval(timer);  
    }  
  
    oDiv.onmouseout=function()  
    {  
        timer=setInterval(move,30);  
    }  
    document.getElementsByTagName('a')[0].onclick=function()  //向左
    {  
        speed=-2;  
    }  
    document.getElementsByTagName('a')[1].onclick=function()  //向右
    {  
        speed=2;  
    }  
}  
</script>  
  
</head>  
  
<body>  
<a href="#">跟着我一起向左走</a> 
<a href="#">跟着我一起向右走</a>  
<div id="div1">  
    <ul>  
        <li><img src="images/001.jpg"/></li>  
        <li><img src="images/002.jpg"/></li>  
        <li><img src="images/003.jpg"/></li>  
        <li><img src="images/004.jpg"/></li> 
         <li><img src="images/001.jpg"/></li>  
        <li><img src="images/002.jpg"/></li>  
        <li><img src="images/003.jpg"/></li>  
        <li><img src="images/004.jpg"/></li>  
    </ul>  
</div>  
  
</body>  
</html>  